<template>
	<view class="my-club page-background">
		  <view v-if="list.length>0"
		        class="club-list">
		    <view @click="to('/mainProcess/club/detail/detail?id='+item.id)"
		          v-for="(item, index) in list"
		          :key="index"
		          class="club-item">
		      <view class="flex-box main">
		        <view class="left">
		          <image v-if="item.icon"
		                 class="icon"
		                 :src="item.icon"
		                 mode=""></image>
		          <image v-else
		                 class="icon"
		                 :src="'@/static/images/image-default.png'|addBaseImgUrl"
		                 mode=""></image>
		          <view class="start"
		                v-if="item.isStar=='1'">
											<text>明星</text>
		          </view>
		        </view>
		        <view class="right">
		          <view class="row1 flex-box">
		            <view class="title public-title line-clamp-2">
		              {{item.clubName}}
		            </view>
		          </view>
		          <view class="row2">
								<view class="row_loaction">
									<view class="middle">
										<van-rate :allow-half="true"
															readonly
															color="#FDD549"
															size="14px"
															:value="item.praise" />
										<text>{{item.praise|floorOne}}</text>
									</view>
									<view v-if="item.distanceStr" class="location flex-box">
											<!-- <image :src="'@/static/images/icon-location-lit.png'|addBaseImgUrl" mode=""></image> -->
											<text>{{item.distanceStr}}</text>
										</view>
								</view>
		            <view class="bottom flex-box">
		              <view v-if="item.serviceContent.includes('1')"
		                    class="lit border-1px">
		                课程
		              </view>
		              <view v-if="item.serviceContent.includes('2')"
		                    class="lit border-1px">
		                活动
		              </view>
		            </view>
		          </view>
		        </view>
		      </view>
		      <view @click.stop="to('/course/detail/detail?id='+item.latestClass.id)"
		            v-if="item.latestClass"
		            class="course-row flex-box">
		        <view class="one-item">
		
		        </view>
		        <view class="two-item flex-box border-top-1px">
		          <view class="tag-item">
		            {{item.latestClass.typeValue.indexOf('团')!==-1? "班":item.latestClass.typeValue.indexOf('私')!==-1? "私":item.latestClass.typeValue.indexOf('集')!==-1? "训":item.latestClass.typeValue}}
		          </view>
		          <view v-if="item.latestClass.medal=='1'"
		                class="tag-item">
		            金
		          </view>
		          <view class="course-title">
		            {{item.latestClass.title}}
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		  <xjx-nodata v-if="list.length==0&&pageLoaded"></xjx-nodata>
			<view v-if="list.length==0&&pageLoaded" class="guide-box flex-box">
				<view @click="to('/mainProcess/club/index/index')" class="guide-btn">
					立即浏览俱乐部
				</view>
			</view>
		  <!-- 列表无数据loading -->
		  <view class="list-loading"
		        v-if="listFlag">
		    <van-loading size="30px"
		                 vertical>加载中...</van-loading>
		  </view>

	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				pageLoaded: false
			}
		},
		onLoad(data) {
			// this.init()
		},
		onShow() {
			this.init()
		},
		computed:{
			...mapState(['userInfo','accessToken','position']),
		},
		methods: {
			to(url){
				uni.navigateTo({
					url: url
				})
			},
			async init(){
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					x: this.position.lng,
					y: this.position.lat,
					pageSize: 999,
					pageNo: 1
				}
				const res = await this.$api.getMyClubList(param)
				if(res && res.code == 200) {
					this.pageLoaded = true
					this.list = res.data
				} 
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-club{
		overflow: hidden;
		min-height: 100vh;
		padding-bottom: 50rpx;
		background: #FFFFFF;
		.club-list {
		  padding: 10rpx 0 20rpx;
		  .item-box {
		    margin: 0 10rpx 15rpx;
		  }
		  .club-item {
		    position: relative;
		    overflow: hidden;
		    margin-bottom: 15rpx;
		    .main {
		      padding: 30rpx 30rpx 14rpx 30rpx;
		      .left {
		        margin-right: 20rpx;
		        width: 150rpx;
		        height: 150rpx;
		        flex: 0 0 auto;
		        position: relative;
		        .icon {
		          width: 100%;
		          height: 100%;
		          border-radius: 15rpx;
		          vertical-align: middle;
		          border: 1rpx solid #f3f3f3;
		        }
		        .star-icon {
		          width: 65rpx;
		          height: 65rpx;
		          position: absolute;
		          left: -2rpx;
		          top: -2rpx;
		        }
		        .start {
		          width: 48rpx;
		          height: 32rpx;
		          // line-height: 28rpx;
		          font-size: 18rpx;
		          color: #ffffff;
		          position: absolute;
		          left: -8rpx;
		          top: 10rpx;
		          text-align: center;
		          background: url('@/static/images/start.png') no-repeat;
		          background-size: cover;
		          text{
		          	position: absolute;
		          	width: 48rpx;
								left: 50%;
								top: 50%;
								transform: translate(-50%,-60%);
		          }
		        }
		      }
		
		      .right {
		        flex: 1 0 auto;
		        display: flex;
		        flex-flow: column;
		        justify-content: space-between;
		
		        .row1 {
		          align-items: top;
		
		          .title {
		            max-width: 546rpx;
		            font-size: 30rpx;
		          }
		
		          
		        }
		
		        .row2 {
		          flex: 1 0 auto;
		          display: flex;
		          flex-flow: column;
		          justify-content: space-between;
		          .lit {
		            color: #f77350;
		            background: #ffffff;
		            font-size: 24rpx;
		            padding: 0 10rpx;
		            margin-right: 10rpx;
		            line-height: 1.5;
		          }
							.row_loaction{
								display: flex;
								justify-content: space-between;
								.middle {
								  color: #fdd549;
								  display: flex;
								  align-items: center;
								  text {
								    font-size: 26rpx;
								    margin-left: 10rpx;
								  }
								}
								.location {
								  align-items: center;
								  height: 42rpx;
								
								  image {
								    width: 22rpx;
								    height: 28rpx;
								  }
								
								  text {
								    font-size: 24rpx;
								    margin-left: 5rpx;
								    color: #cccccc;
								  }
								}
							}
							
		          .bottom {
		            justify-content: flex-start;
		          }
		        }
		      }
		    }
				
		    .course-row {
		      width: 100%;
		      box-sizing: border-box;
		      height: 50rpx;
		      align-items: center;
		      font-size: 24rpx;
		      padding: 0 20rpx 0 20rpx;
		      .one-item {
		        width: 180rpx;
		      }
		      .two-item {
		        width: 543rpx;
		        padding-top: 10rpx;
		        // border-top:1rpx solid #E9E9E9;
		        align-items: center;
		        .tag-item {
		          background-color: #fde3dc;
		          color: #f77350;
		          border-radius: 5rpx;
		          margin-right: 10rpx;
		          flex: 0 0 auto;
		          padding: 0 7rpx;
		          font-size: 24rpx;
		          line-height: 1.5;
		        }
		        .course-title {
		          margin: 0 20rpx 0 10rpx;
		          flex: 1 1 auto;
		          overflow: hidden;
		          text-overflow: ellipsis;
		          white-space: nowrap;
		          font-size: 26rpx;
		          color: #999999;
		        }
		      }
		
		      .price {
		        font-size: 24rpx;
		        color: $public-color-yellow1;
		
		        text {
		          font-size: 30rpx;
		        }
		      }
		    }
		  }
		}
		.guide-box{
			justify-content: center;
			margin-top: -100rpx;
			.guide-btn{
				height: 78rpx;
				line-height: 74rpx;
				border: 2rpx solid #2E87FF;
				border-radius: 39rpx;
				color: #2E87FF;
				padding: 0 45rpx;
				display: inline-block;
				margin: 20rpx auto;
			}
		}
	}
</style>

<style>
	.van-icon{
		color: #FDD549!important;
	}
</style>
